<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      * {
        box-sizing: border-box;
      }
      @keyframes bowen {
        0% {
        }
        100% {
          width: 80px;
          height: 80px;
          border-radius: 40px;
          /*background-color: #9bceea;*/
          opacity: 0;
        }
      }
      .father {
        position: relative;
        height: 100px;
        width: 100px;
        margin: 0 auto;
        border: 1px solid blue;
      }
      .center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 6px;
        height: 6px;
        background-color: #9bceea;
        border-radius: 3px;
      }
      div[class^="out"] {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 15px;
        height: 15px;
        border-radius: 8px;
        /*background-color: #9bceea;*/
        border: 2px solid #9bceea;
        box-shadow: 0 0 12px #00a4ff;
        /*animation-name: bowen;*/
        /*animation-duration: 3s;*/
        animation: bowen 3s linear infinite;
      }
      .father .out-two {
        animation-delay: 0.5s;
      }
      .father .out-three {
        animation-delay: 1s;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="center"></div>
      <div class="out-one"></div>
      <div class="out-two"></div>
      <div class="out-three"></div>
    </div>
  </body>
</html>
